<?php 
$sql =	"SELECT
			  c.sef_url AS class,
			  d.Name,
			  d.description,
			  d.meta_key,
			  d.meta_description	
		  FROM
			  category AS c,
			  category_description AS d
		  WHERE
		  
			  c.category_id = d.category_id
			  AND
			  d.lang_id = '".$_SESSION['lang_id']."'
			  AND
			  c.category_id = '".$sef_url."'
		  ";
$result = query($sql);
$row = mysql_fetch_object($result);


head(sth($row->Name),sth($row->meta_description),sth($row->meta_key),'projects');



?>
 <section id="content" class="cf">
 
        <div class="gr1 left table-display-nm">
            <a href="<?=HTML_BASE.$_SESSION['lang']?>/projects" class="<?=$row->class?>">
                <span>&larr; <?=$row->Name?></span>
            </a>
        </div>
        
        <div class="gr3 right">
            <div id="netmap">
            </div>
        </div>
        
                
</section>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    

    
 function initialize() {
	 
        var latitude = 42.771923, 
            longitude = 25.112352,
            radius = 80000, //how is this set up
            center = new google.maps.LatLng(latitude,longitude),
            //bounds = new google.maps.Circle({center: center, radius: radius}).getBounds(),
            mapOptions = {
                center: center,
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: true
            };

        var map = new google.maps.Map(document.getElementById("netmap"), mapOptions);

        setMarkers(center, radius, map);
    }

    function setMarkers(center, radius, map) {
        var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "<?=HTML_BASE.$_SESSION['lang']?>/json?<?=date('Y-m-d-g-i')?>", 
                'dataType': "json", 
                'success': function (data) {
                     json = data.values; 
					 
                 }
            });
            return json;
        })();

        

        //loop between each of the json elements
        for (var i = 0, length = json.length; i < length; i++) {
			
            var data = json[i],
            latLng = new google.maps.LatLng(data.latitude, data.longitude); 



            
                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });
                infoBox(map, marker, data);
           
        }

        circle.bindTo('center', marker, 'position');
    }

    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();
        // Attaching a click event to the current marker
        google.maps.event.addListener(marker, "click", function(e) {
            infoWindow.setContent(getContent(data));
            infoWindow.open(map, marker);
        });

        // Creating a closure to retain the correct data 
        // Note how I pass the current data in the loop into the closure (marker, data)
        (function(marker, data) {
          // Attaching a click event to the current marker
          google.maps.event.addListener(marker, "click", function(e) {
            infoWindow.setContent(getContent(data));
            infoWindow.open(map, marker);
          });
        })(marker, data);
    }
	
	function getContent(data){
		var content = '<b>'+data.title+'<b><br><br><a href="<?=HTML_BASE.$_SESSION['lang']?>/'+data.sef+'" ><img style="width:160px" src="<?=HTML_BASE?>project_images/covers/'+data.cover+'" /></a>';
		return content;
	}
   google.maps.event.addDomListener(window, 'load', initialize);

    
    
$(function(){ 
    setHeight();
    
    $( window ).resize(function() {
        setHeight();
    });
    
    function setHeight() {
        var div = '.gr3';
        var width = $(div).width()*9/16 + 6 + 'px';
        $(div).css('height', width);
        $(div + ' a').css('line-height', width);
    }
});
	
</script>

<?php
foot('home');
?>